<template>
  <div>
    <div id="back-login" @click="back">
      <img src="../../assets/back.png" height="16" width="20" />
      <span class="back-text">返回登录</span>
    </div>
    <div class="reg-title">欢迎注册BlueBike</div>

    <mt-field class="reg-input" label type="text" placeholder="登录号(必填)" v-model="loginCode"></mt-field>
    <mt-field class="reg-input" label type="password" placeholder="密码(必填)" v-model="password"></mt-field>
    <mt-field class="reg-input" label type="text" placeholder="用户名(必填)" v-model="name"></mt-field>
    <mt-field class="reg-input" label type="text" placeholder="学号(必填)" v-model="studentNum"></mt-field>
    <mt-button class="reg-btn" type="primary" @click="RegisterClick">确认注册</mt-button>
  </div>
</template>
<script>
import { Toast } from "mint-ui";
import { register } from "../../api/user";
export default {
  data() {
    return {
      loginCode: "",
      password: "",
      name: "",
      studentNum: "",
      roles: ["ROLE_CLIENT"]
    };
  },
  methods: {
    clear() {
      this.loginCode = "";
      this.password = "";
      this.name = "";
      this.studentNum = "";
    },
    back() {
      this.clear();
      this.$router.push({ path: "/login" });
    },
    // 写一个注册函数
    RegisterClick() {
      // 写一些输入判断
      if (
        this.loginCode == "" ||
        this.password == "" ||
        this.name == "" ||
        this.studentNum == ""
      ) {
        Toast({
          message: "表单内容不能为空",
          position: "middle",
          duration: 1000
        });
        return 0;
      }
      /*向服务端发送数据*/

      this.send_register(
        this.loginCode,
        this.password,
        this.name,
        this.studentNum,
        this.roles
      );
      //清除脏数据
      this.clear();
    },
    //向服务端post数据
    send_register(loginCode, password, name, studentNum, roles) {
      register(loginCode, password, name, studentNum, roles)
        .then(res => {
          if (res.code == 1) {
            Toast({
              message: "注册成功，2秒后返回登录页",
              position: "bottom",
              duration: 2000
            });
            setTimeout(() => {
              //设置延迟执行
              console.log("返回登录页");
              this.$router.push({ path: "/login" });
            }, 2000);
          }
        })
        .catch(err => {
          Toast({
            message: err.msg,
            position: "bottom",
            duration: 1000
          });
        });
    }
  }
};
</script>
<style >
#back-login {
  text-align: start;
  padding-left: 30px;
  padding-top: 30px;
}
.back-text {
  color: #26a2ff;
  font-size: 40px;
}
.reg-title {
  color: #26a2ff;
  font-size: 60px;
  margin-top: 200px;
  margin-bottom: 50px;
  text-align: center;
}
.reg-input {
  margin-top: 20px;
  width: 80%;
  margin-left: 10%;
  touch-action: none;
}
.reg-btn {
  width: 30%;
  margin-top: 100px;
}
</style>
